<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>col</title>
	<link rel="stylesheet" href="../css/col.css">
	<link rel="stylesheet" href="../lib/swiper/dist/css/swiper.min.css">
</head>
<body>
	<ul class="col-wrapper">
		<li class="col-item">
			<div class="col-header">
				<span>标题1</span>
				<div class="page-btn-row" id="swiper1Btn">
					<a href="javascript:void(0);">&lt;</a><a href="javascript:void(0);">&gt;</a>
				</div>	
			</div>
			<div class="col-body">
				<div id="swiper1" class="swiper-container">
					<ul class="swiper-wrapper">
						<li class="swiper-slide box box-1"></li>
						<li class="swiper-slide box box-2"></li>
						<li class="swiper-slide box box-3"></li>
					</ul>
				</div>
			</div>
			<div class="col-footer">
				
			</div>
		</li>
		<li class="col-item">
			<div class="col-header">
				<span>标题2</span>
				<div class="page-btn-row">
					<a href="javascript:void(0);">&lt;</a><a href="javascript:void(0);">&gt;</a>
				</div>	
			</div>
			<div class="col-body">
				<div id="swiper2" class="swiper-container">
					<ul class="swiper-wrapper">
						<li class="swiper-slide box box-1"></li>
						<li class="swiper-slide box box-2"></li>
						<li class="swiper-slide box box-3"></li>
					</ul>
				</div>
			</div>
			<div class="col-footer">
				
			</div>
		</li>
		<li class="col-item">
			<div class="col-header">
				<span>标题3</span>
				<div class="page-btn-row">
					<a href="javascript:void(0);">&lt;</a><a href="javascript:void(0);">&gt;</a>
				</div>	
			</div>
			<div class="col-body">
				<div id="swiper3" class="swiper-container">
					<ul class="swiper-wrapper">
						<li class="swiper-slide box box-1"></li>
						<li class="swiper-slide box box-2"></li>
						<li class="swiper-slide box box-3"></li>
					</ul>
				</div>
			</div>
			<div class="col-footer">
				
			</div>
		</li>
	</ul>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib/swiper/dist/js/swiper.min.js"></script>
<script type="text/javascript">
	$(function() {
		fn1();
		fn2();
		fn3();
	});

	function fn1() {
		var swiper = new Swiper('#swiper1', {
			loop: true,
			autoplay: {
				disableOnInteraction: false,
			}
		});
		$('#swiper1Btn a').eq(0).on('click', function() {
			swiper.slidePrev();
		});
		$('#swiper1Btn a').eq(1).on('click', function() {
			swiper.slideNext();
		});
	}
	function fn2() {
		var swiper = new Swiper('#swiper2', {
			loop: true,
			autoplay: {
				disableOnInteraction: false,
			}
		});
		$('#swiper2Btn a').eq(0).on('click', function() {
			swiper.slidePrev();
		});
		$('#swiper2Btn a').eq(1).on('click', function() {
			swiper.slideNext();
		});
	}
	function fn3() {
		var swiper = new Swiper('#swiper3', {
			loop: true,
			autoplay: {
				disableOnInteraction: false,
			}
		});
		$('#swiper3Btn a').eq(0).on('click', function() {
			swiper.slidePrev();
		});
		$('#swiper3Btn a').eq(1).on('click', function() {
			swiper.slideNext();
		});
	}
</script>
</html>
